<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 相邻兄弟选择器</title>
    <style type="text/css">
        /* 如果需要选择紧接在另一个元素后的元素
           或者二者有相同的父元素 使用相邻兄弟选择器
           + 是相邻兄弟结合符
        */
        h1 + p {
            margin-top: 50px;
        }

        /* 用一个结合符 只能选择两个相邻兄弟中的第二个元素
           这样过程  <li>List item 1</li>
                    <li>List item 2</li> 选择了 2 然后
                    <li>List item 2</li>
                    <li>List item 3</li> 中选择了 3 导致后面的 2,3,4,5,6 都是红色的
            这个也匹配很多个地方的。 也就是匹配是贪婪的
        */
        li + li {
            font-weight: bold;
            color: red;
        }

        /*  结合其他选择器  子选择器 后代选择器的语法 */
        html > body table  + ul{
            margin-top: 20px;
            background: #8235bd;
        }

    </style>
</head>
<body>
    <h1>这是一个 Heading</h1>
    <p>This is a paragraph</p>  <!--  选中的是h1 后的这个p 元素 -->
    <p>This is a paragraph</p>
    <p>This is a paragraph</p>
    <p>This is a paragraph</p>


    <div>
        <ul>
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
            <li>List item 4</li>
            <li>List item 5</li>
            <li>List item 6</li>
        </ul>
        <ol>
            <li>OrderList item 1</li>
            <li>OrderList item 2</li>
            <li>OrderList item 3</li>
            <li>OrderList item 4</li>
            <li>OrderList item 5</li>
            <li>OrderList item 6</li>
        </ol>
    </div>
    <table>
        <tr>
            <th>日期</th>
            <th>地址</th>
        </tr>
    </table>
    <ul>
        <li>这是测试地址一</li>
        <li>这是测试地址二</li>
        <li>这是测试地址三</li>
    </ul>   <!-- 写的多个 style 会作用于同一个元素 -->
</body>
</html>